<template>
  <u-modal :show="show" title="选择站点信息" showCancelButton @confirm="confirm" @cancel="cancel">
    <view class="slot-content">
      <u--form :model="bind" ref="uForm" labelWidth="280rpx" labelAlign="left">
        <u-form-item label="站点:" prop="stationName" class="u-border-bottom" @click="stationShow = true">
          <u--input v-model="bind.stationName" type="text" disabled disabledColor="#ffffff" placeholder="请选择站点" border="none"></u--input>
		  <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
      </u--form>
	  
	  <u-picker 
		  :show="stationShow" 
		  keyName="label" 
		  :columns="stationList" 
		  :defaultIndex="defaultIndex"
		  @cancel="stationShow = false" 
		  @confirm="stationConfirm">
	  </u-picker>
	  <u-toast ref="uToast" />
    </view>
  </u-modal>
</template>

<script>
import * as BaseApi from '@/api/base/base';
import storage from '@/utils/storage';
export default {
  props: {
    show: Boolean,
  },
  data () {
    return {
      bind: {
        stationId: '',
		stationName: '',
		errMessage: '',
      },
	  defaultIndex: [0],
	  stationShow: false,
	  shiftShow: false,
	  stationList: [],
    }
  },
  created() {
	this.init();
  },
  methods: {
	init() {
		BaseApi.getStationList().then(res => {
			  console.log("站点列表:", res);
			  if (!res || !res.data || res.data.length == 0) {
				  storage.remove('STATION_0');
				  return;
			  }
			  let result = res.data.map((item) => {
				return {
				  label: item.stationName,
				  id: item.stationId,
				};
			  });
			  Object.assign(this.bind, res.data[0]);
			  this.stationList = [];
			  this.stationList.push(result);
		});
	},
    confirm () {
		if (!this.bind.stationId) {
			this.$refs.uToast.error(`站点未选择，不能保存`);
			return;
		}
		// TODO
		this.$emit('submit', this.bind);
    },
	navigateTo (url) {
	  uni.navigateTo({ url: url })
	},
    cancel () {
      this.$emit('close')
    },
	stationConfirm(e) {
		console.log("站点确认:", e);
		this.stationShow = false;
		this.bind.stationId = e.value[0].id;
		this.bind.stationName = e.value[0].label;
	},
  }
}
</script>

<style lang="scss" scoped>
.scroll-container {
  max-height: 300rpx; /* 你可以根据需要调整高度 */
  overflow-y: auto;   /* 使内容超出时出现垂直滚动条 */
}
.cell-page {
	padding-bottom: 20px;
}

.cell-box {
	&__title {
		font-size: 14px;
		color: rgb(143, 156, 162);
		margin: 20px 0px 0px 15px;
	}

	&__block {
		// background-color: #fff;
		margin-top: 20px;
	}
}

.u-page {
	padding: 0;

	&__item {

		&__title {
			color: $u-tips-color;
			background-color: $u-bg-color;
			padding: 15px;
			font-size: 15px;

			&__slot-title {
				color: $u-primary;
				font-size: 14px;
			}
		}
	}
}

.u-slot-title {
	@include flex;
	flex-direction: row;
	align-items: center;
}

.u-cell-text {
	font-size: 15px;
	line-height: 22px;
	color: #303133;
	margin-right: 5px;
}

.u-slot-value {
	line-height: 17px;
	text-align: center;
	font-size: 10px;
	padding: 0 5px;
	height: 17px;
	color: #FFFFFF;
	border-radius: 100px;
	background-color: #f56c6c;
}
.wrap {
	padding: 12px;
}

.demo-layout {
	height: 23px;
	// border-radius: 4px;
	color: #62c188;
}

.bg-purple {
	background: #dbfbdb;
}

</style>